<template>
	<view class="container">
		<view class="tip">设置新的登录密码</view>
		<view class="before">
			<view class="title">请输入{{phone}}收到的短信验证码</view>
			<input type="password" placeholder="请输入验证码" v-model="code">
			<view class="code" @click="openSvg">
				{{isSend ? time : '获取验证码'}}
			</view>
		</view>
		<view class="after">
			<view class="title">设置新密码</view>
			<input type="password" placeholder="请输入登录密码" v-model="password">
			<input type="password" placeholder="请再次输入登录密码" v-model="aginWord">
		</view>
		<view class="btn" @click="reset">确定</view>
		<!-- 图形验证码弹窗 -->
		<van-dialog class="custom-button" use-slot title="图片验证码" :show="svgShow" @confirm="submit">
			<input type="text" placeholder="请输入图形验证码" v-model="svgCode">
			<image :src="svgUrl"></image>
		</van-dialog>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import {tip} from '@/utils/tip'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				code: '',
				aginWord: '',
				isSend: false,
				time: 60,
				timer: null,
				svgShow: false,
				svgCode: '',
				svgUrl: '',
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.phone = this.userInfo.phone
		},
		methods: {
			openSvg() {
				if (this.isSend) return
				this.svgShow = true
				this.getSvg()
			},
			// 获取图形
			getSvg() {
				let params = {
					type: 'base64'
				}
				this.$service.common.getSvg(params).then((res) => {
					this.svgUrl = res.data
					this.captchaId = res.captchaId
				}).catch((err) => {
			
				})
			},
			// 验证码倒计时
			timeDown() {
				this.isSend = true
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						clearInterval(this.timer)
						this.time = 60
						this.isSend = false
					}
				}, 1000)
			},
			// 提交图形验证码
			submit() {
				if (!this.svgCode) {
					tip({
						title: '图形验证码不能为空'
					})
					return
				}
				this.getCode()
			},
			// 获取短信验证码
			getCode() {
				let params = {
					phone: this.phone,
					captchaId: this.captchaId,
					verifyCode: this.svgCode
				}
				this.$service.common.getCode(params).then(() => {
					this.timeDown()
				}).catch((err) => {
					uni.showToast({
						title: '图形' + err,
						icon: 'none'
					})
				})
				this.svgCode = '' //清空
				this.svgUrl = ''
				this.svgShow = false // 弹窗关闭
			},
			valid() {
				if (!this.code) {
					tip({title: '验证码不能为空'})
					return false
				}
				if (!this.password || !this.aginWord) {
					tip({title: '密码不能为空'})
					return false
				}			
				if (this.password != this.aginWord) {
					tip({title: '两次密码不一致'})
					return false
				}
				return true
			},
			reset() {
				let params = {
					phone: this.phone,
					password: this.password,
					code: this.code
				}
				if(!this.valid()) return
				this.$service.common.modifyPwdByPhone(params).then( async(res) => {
					await tip({title: '修改成功'})
					uni.navigateTo({
						url: '/pagesC/my/setting/index'
					})
				}).catch((err) => {
					tip({ title: err})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.tip {
			padding: 28rpx 24rpx 16rpx 24rpx;
			font-size: 20rpx;
			color: #999999;
		}

		.before,
		.after {
			position: relative;
			margin-bottom: 24rpx;

			view {
				font-size: 20rpx;
				font-weight: bold;
				padding: 0 24rpx;
				padding-bottom: 12rpx;
			}

			input {
				background-color: white;
				height: 96rpx;
				font-size: 28rpx;
				padding: 0 24rpx;
			}

			.code {
				position: absolute;
				top: 70rpx;
				right: 0;
				color: $main-color;
				font-size: 28rpx;
				z-index: 99;
			}
		}

		.after :nth-child(2) {
			border-bottom: 2rpx solid #F2F2F2;
		}

		.btn {
			width: 342rpx;
			height: 72rpx;
			border-radius: 42rpx;
			background-color: $main-color;
			position: fixed;
			bottom: 96rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			text-align: center;
			line-height: 72rpx;
			color: white;
		}
		/deep/ .custom-button {
			input {
				width: 70%;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		
			image {
				margin-top: 20rpx;
				display: block;
				width: 180rpx;
				height: 90rpx;
				margin: 30rpx auto;
			}
		}
	}
</style>
